<template>
  <div class="h100">
    <!-- :autoplay="3000" -->
    <van-swipe class="my-swipe" indicator-color="#B19603" :loop="flag">
      <van-swipe-item class="swipe-first">
        <div class="one">
          <img src="@/assets/Di/法律源于人的自卫本能.png" alt="" />
        </div>
        <div class="two">
          <img src="@/assets/Di/形状1.png" alt="" />
          <img src="@/assets/Di/律师侠.png" alt="" />
        </div>
      </van-swipe-item>
      <van-swipe-item class="swipe-second">
        <div class="one">
          <img src="@/assets/Di/法律面前人人平等.png" alt="" />
        </div>
        <div class="two">
          <img src="@/assets/Di/形状1.png" alt="" />
          <img src="@/assets/Di/律师侠.png" alt="" />
        </div>
      </van-swipe-item>
      <van-swipe-item class="swipe-third">
        <div class="one">
          <img src="@/assets/Di/让每个人都被公正的对待.png" alt="" />
        </div>
        <!-- 点击跳出 -->
        <div class="two" type="primary" @click="show = true">
          <img class="tiyan" src="@/assets/Di/logo.png" alt="" />
        </div>
      </van-swipe-item>
    </van-swipe>
    <!-- 遮罩 -->
    <van-popup v-model="show">
      <h1>用户隐私协议</h1>
      <p>
        欢迎使用律师侠法律服务平台<br />
        我们非常重视用户隐私并严格遵守相关的法律规定。请您仔细阅读《隐私政策》和《用户协议》后再继续使用。如果您继续使用我们的服务，表示您已经充分阅读和理解协议的全部内容。
      </p>
      <p>更详细隐私信息政策, 请您认真阅读如下协<br />议:</p>
      <p><span>《隐私政策》</span> <span>《用户协议》 </span></p>
      <p>
        <button @click="show = false"></button>
        <button @click="gologin()"></button>
      </p>
    </van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag: false,
      show: false,
    };
  },
  methods: {
    gologin() {
      this.$router.push("/login");
    },
  },
};
</script>

<style lang="scss" scoped>
.van-popup {
  width: 5.87rem;
  height: 7.43rem;
  border-radius: 0.16rem;
  padding-left: 0.43rem;
  h1 {
    margin-top: 0.55rem;
    color: #333333;
    font-size: 0.3rem;
  }
  p {
    margin-top: 0.24rem;
    font-size: 0.26rem;
    color: #333333;
    line-height: 0.42rem;
    padding-right: 0.46rem;
    span {
      color: #ffd800;
      &:nth-of-type(2) {
        margin-left: 0.49rem;
      }
    }
    &:last-of-type {
      margin-top: 0.7rem;
      display: flex;
      // justify-content: space-between;
      button {
        background-color: rgba(255, 0, 0, 0);
        width: 2.12rem;
        height: 0.56rem;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        border: none;
        &:nth-of-type(1) {
          margin-left: 0.2rem;
          background-image: url(@/assets/Di/不同意.png);
        }
        &:nth-of-type(2) {
          margin-left: 0.6rem;
          background-image: url(@/assets/Di/同意.png);
        }
      }
    }
  }
}
.van-popup--bottom.van-popup--round {
  border-radius: 0.2rem;
}
.van-popup--center {
  top: 67%;
}
.my-swipe {
  height: 100%;
  .van-swipe-item {
    height: 100%;
    color: #fff;
    font-size: 20px;
    text-align: center;
    background-color: #ffd800;
    height: 100%;
    .one {
      img {
        width: 4.94rem;
        height: 1.95rem;
        margin: 2.7rem auto 0;
      }
    }
    .two {
      margin-top: 5.75rem;
      margin-bottom: 1rem;
      img {
        width: 0.67rem;
        height: 0.73rem;
        &:nth-of-type(2) {
          width: 0.93rem;
          height: 0.3rem;
          position: relative;
          top: -0.2rem;
          left: 0.1rem;
        }
      }
    }
  }
  .my-swipe .swipe-second {
    .one {
      img {
        width: 4.03rem;
      }
    }
  }
}
.my-swipe .swipe-third {
  .one {
    img {
      width: 4.99rem;
    }
  }
  .two {
    .tiyan {
      width: 2.72rem;
      height: 0.79rem;
    }
    .wrapper {
      width: 100%;

      align-items: center;
      justify-content: center;
      height: 100%;
      .block {
        width: 5.87rem;
        height: 7.43rem;
        background-color: rgb(146, 19, 19);
        display: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
      }
    }
  }
}
</style>>
